/**
 * @author cqb 2016-06-23.
 * @module Panel
 */

const React = require("react");
const ReactDOM = require('react-dom');
const classnames = require("classnames");
const BaseComponent = require("core/BaseComponent");
const Core = require('Core');
const strings = require('utils/strings');
const Dom = require('utils/Dom');
const FontIcon = require('FontIcon');
const substitute = strings.substitute;
const PropTypes = React.PropTypes;
const createFragment = React.addons.createFragment;
const grids = require('utils/grids');
const getGrid = grids.getGrid;
const shallowEqual = require('utils/shallowEqual');
const Draggable = require("Draggable");

/**
 * Panel 类
 * @class Panel
 * @constructor
 * @extend BaseComponent
 */
class Panel extends BaseComponent {
    constructor(props) {
        super(props);

        this.addState({
            title: props.title || "",
            content: props.content || "",
            position: props.position || {}
        });
    }

    /**
     * 设置标题
     * @param title
     */
    setTitle(title){
        this.setState({title});
    }

    /**
     * 设置内容
     * @param content
     */
    setContent(content){
        this.setState({content});
    }

    /**
     * 设置内容和标题
     * @param title
     * @param content
     */
    setTitleAndContent(title, content){
        this.setState({title, content});
    }

    renderHeader(){
        let tools = this.props.tools;
        let align = tools ? tools.align || "right" : "";

        let tools_cont = null;
        if(tools) {
            let components = tools.components;

            if(components && components.length){
                let className = classnames("cm-panel-tools", align);

                let components_map = {};
                components.forEach(function(comp, index){
                    components_map["keys_"+index] = comp;
                });
                tools_cont = (
                    <span className={className}>
                        {createFragment(components_map)}
                    </span>
                );
            }
        }

        let text = <span className="cm-panel-head-text">{this.state.title}</span>;
        if(tools_cont) {
            if (align === "right") {
                return createFragment({
                    title: text,
                    tools: tools_cont
                });
            } else {
                return createFragment({
                    tools: tools_cont,
                    title: text
                });
            }
        }else{
            return text;
        }
    }

    renderFooter(){
        let tools = this.props.footers;
        let tools_cont= null;
        if(tools) {
            let components = tools.components;

            if(components && components.length){
                let className = classnames("cm-panel-footer-tools");

                let components_map = {};
                components.forEach(function(comp, index){
                    components_map["keys_"+index] = comp;
                });
                tools_cont = (
                    <div className="cm-panel-footer">
                        <span className={className}>
                            {createFragment(components_map)}
                        </span>
                    </div>
                );
            }
        }

        return tools_cont;
    }

    /**
     *
     * @param nextProps
     */
    componentWillReceiveProps(nextProps){
        if(this.props.content !== nextProps.content || this.props.title !== nextProps.title){
            this.setState({
                title: nextProps.title,
                content: nextProps.content
            });
        }
    }

    /**
     * 渲染内容
     * @returns {XML}
     */
    renderContent(){
        if(this.state.content && this.state.content.substring && this.state.content.substring(0,1) === "<"){
            return (
                <div dangerouslySetInnerHTML={{__html: this.state.content}}></div>
            );
        }else{
            return this.state.content;
        }
    }

    setPosition (pos) {
        this.setState({
            position: pos
        });
    }

    onDragStop = (event, data) => {
        this.setState({
            position: {
                x: data.x,
                y: data.y
            }
        });
    }

    render(){
        let {className, style, grid} = this.props;

        className = classnames("cm-panel", className, getGrid(grid));

        let headContent = this.renderHeader();
        return (
            <Draggable
                bounds='.shadow-backdrop' 
                handle='.cm-panel-title'
                disabled={!this.props.draggable}
                position={this.state.position}
                onStop={this.onDragStop}
                cancel='.cm-panel-tools,.cm-panel-head-text'>
                    <div className={className} style={style}>
                        <div className="cm-panel-title">
                            {headContent}
                        </div>
                        <div className="cm-panel-content">
                            {this.renderContent() || this.props.children}
                        </div>
                        {this.renderFooter()}
                    </div>
            </Draggable>
        );
    }
}

Panel.propTypes = {
    /**
     * 标题
     * @attribute title
     * @type {String}
     */
    title: PropTypes.string,
    /**
     * 自定义class
     * @attribute className
     * @type {String}
     */
    className: PropTypes.string,
    /**
     * 自定义样式
     * @attribute style
     * @type {Object}
     */
    style: PropTypes.object
};

module.exports = Panel;